<template>
    <div>
        <h3>销售出库</h3>
        <el-dropdown>
         <span class="el-dropdown-link">
                供应商id<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-input v-model="costomId" placeholder="请输入客户id" @blur="changeId(costomId)"></el-input>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>黄金糕</el-dropdown-item>
                <el-dropdown-item>狮子头</el-dropdown-item>
                <el-dropdown-item>螺蛳粉</el-dropdown-item>
                <el-dropdown-item disabled>双皮奶</el-dropdown-item>
                <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>

        <span>销售员: </span> <span>{{salesperson}}</span> &nbsp;&nbsp;
        <span>订单总额: </span> <span>{{totalPrice}}</span><br>
        <span>送货地址: </span> <el-input v-model="adress" placeholder="送货地址"></el-input><br>

        <span>采购物品：</span>
        <el-table
                :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
                style="width: 100%">
            <el-table-column
                    label="商品名称"
                    prop="goodsName">
            </el-table-column>
            <el-table-column
                    label="厂家"
                    prop="goodsFactory">
            </el-table-column>
            <el-table-column
                    label="现有库存"
                    prop="stockNumber">
            </el-table-column>
            <el-table-column
                    label="建议销售价"
                    prop="finalSellPrice">
            </el-table-column>
            <el-table-column
                    label="出库数量"
                    prop="number">
            </el-table-column>
<!--            <template>-->
<!--                <el-input-number v-model="num" @change="handleChange"-->
<!--                                 :min="1" :max="10" label="出库数量"></el-input-number>-->
<!--            </template>-->
            <el-table-column
                    align="right">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleDelete(scope.row.ssId)">移除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>


        <div class="tabListPage">
            <el-pagination @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="currentPage"
                           :page-sizes="pageSizes"
                           :page-size="PageSize" layout="total, sizes, prev, pager, next, jumper"
                           :total="totalCount">
            </el-pagination>
        </div>

        <el-button type="primary" @click="addProduct" style="margin: 20px;">添加</el-button>
        <el-button type="primary" @click="exWarehouse" style="margin: 20px;">出库</el-button>

    </div>
</template>

<script>
    export default {
        name: "RetrievaView",
        data() {
            return {
                ssId:'',
                goodsId:'',
                costomId:'1',
                salesperson:'刘佳',
                totalPrice:'1245600',
                adress:'',
                range: '',
                customerName: '',
                tableData: [],
                search: '',
                num:1,
                number:1,
                totalCount:null,

                // 默认显示第几页
                currentPage:1,
                // 个数选择器（可修改）
                pageSizes:[1,2,3,4],
                // 默认每页显示的条数（可修改）
                PageSize:3,
            }
        },
        mounted() {

            this.init(1)
        },
        methods: {
            init(costomId){

                let url = 'api/sell/showStockOut?customId='+costomId
                    this.$axios.get(url).then(r=>{
                        console.log(r.data)
                       this.tableData = r.data
                    })

            },
            changeId(costomId){
              this.init(costomId)
            },

            handleDelete(id) {
                    this.$axios.get("api/sell/delNumber?sellStockId="+id).then(r =>{
                        if (r.data == true){
                            this.init(1);
                        }
                    })

            },
            //添加出库商品预处理
            addProduct() {
                this.$router.push("ShowAdd")
            },
            //点击出库
            exWarehouse(){

                let url = "api/sell/stockOut?customId="+this.costomId
                this.$axios.get(url).then(r =>{

                    console.log(r.data)
                    if (r.data == true){
                        alert("出库成功")
                    }

                })
            },


            handleChange(value){

                console.log(value);
            },

            handleSizeChange(size) {
                // 改变每页显示的条数
                this.PageSize=size
                // 注意：在改变每页显示的条数时，要将页码显示到第一页
                this.currentPage=1
            },
            // 显示第几页
            handleCurrentChange(size) {
                // 改变默认的页数
                this.currentPage=size
            },
        },
    }
</script>

<style scoped>

</style>